<template>
  <div>
    <!-- 第三排 轮播图 -->
    <div
      class="slideshow"
      :style="{ '--myImgPath': 'url(' + bannerbgImg + ')' }"
      ref="banner"
    >
      <!-- 版心 -->
      <div class="newcontainer clearfix">
        <!--  左边图片  -->
        <div
          class="bj-left clearfix"
          v-show="index == bannershow"
          v-for="(item, index) in bannerImgarr"
          :key="index"
        >
          <img :src="item.imageUrl" alt="" />
        </div>

        <!-- 下面 轮播图 -->
        <div class="slideshow-sli">
          <ul>
            <li
              v-for="(item, index) in slideshowli"
              :key="index"
              @click="switchBanner(index)"
            >
              <a href="#" :class="{ active: libgc == index }"></a>
            </li>
          </ul>
        </div>

        <!-- 右边图片 -->
        <div class="bj-right">
          <a href="#" class="bj-right-button"></a>
          <p>pc 安卓 iPhone WP ipad Mac 六大客户端</p>
        </div>

        <!-- 精灵图 -->
        <a href="#">
          <div class="jl-left" @click="changebanner(-1)"></div>
        </a>
        <a href="#">
          <div class="jl-right" @click="changebanner(1)"></div>
        </a>
      </div>
    </div>

    <!-- 第四排 热门推荐 -->
    <div class="hot">
      <!-- 新版心 -->
      <div class="newcontainer">
        <!-- 左边 -->
        <div class="hot-left">
          <!-- 上面导航 -->
          <div class="hot-left-top clearfix">
            <!-- 左 -->
            <div class="yuan"></div>
            <p>热门推荐</p>
            <a href="#">华语</a>
            <li>|</li>
            <a href="#">流行</a>
            <li>|</li>
            <a href="#">摇滚</a>
            <li>|</li>
            <a href="#">民谣</a>
            <li>|</li>
            <a href="#">电子</a>

            <!-- 右 -->
            <div class="jt"></div>
            <h3 @click="$router.push('/songseets')"><a href="#">更多</a></h3>
          </div>

          <!-- 视频 -->
          <div class="hot-left-video clearfix">
            <!-- 1 -->
            <div v-for="(item, index) in HotValarr" :key="index">
              <img :src="item.picUrl" />
              <a href="#">{{ item.name }}</a>
              <span class="img-back-g"></span>
              <span class="img-bottom">
                <span class="bfl"></span>
                <b>{{ item.playCount }}</b>
                <a class="bof"></a>
              </span>
            </div>
          </div>

          <!-- 新品上架 -->
          <div class="xp clearfix">
            <!-- 左 -->
            <div class="yuan"></div>
            <p>新碟上架</p>

            <!-- 右 -->
            <div class="jt"></div>
            <h3><a href="#" @click="$router.push('/newdisc')">更多</a></h3>
          </div>

          <!-- 新碟上架 -->
          <div class="plate clearfix">
            <ul>
              <li v-for="(item, index) in newMusic" :key="index">
                <div class="plate-img-box">
                  <img :src="item.picUrl" alt="" />
                  <div class="img-back-z"></div>
                  <a href="#" class="plate-img-box-a1">{{ item.name }}</a>
                  <a href="#" class="plate-img-box-a2">{{
                    item.artist.name
                  }}</a>
                </div>
                <a href="#">
                  <div class="action"></div>
                </a>
              </li>
            </ul>
          </div>

          <!-- 榜单 -->
          <div class="List clearfix">
            <!-- 左 -->
            <div class="yuan"></div>
            <p>榜单</p>

            <!-- 右 -->
            <div class="jt"></div>
            <h3>
              <a href="#" @click="$router.push('/topList?id=19723756')">更多</a>
            </h3>
          </div>

          <!-- 榜单榜 -->
          <div class="bd clearfix">
            <!-- 左 -->
            <div>
              <!-- 左 -->
              <dl class="clearfix">
                <dt class="clearfix">
                  <a href="#">
                    <img src="@/assets/picture/b31.jpg" alt="" />
                  </a>
                  <!-- 右 -->
                  <div class="bd-dt-right clearfix">
                    <a href="#">
                      <p>飙升榜</p>
                    </a>
                    <a href="#">
                      <div class="bd-dt-right-action"></div>
                    </a>
                    <a href="#">
                      <div class="bd-dt-right-wj"></div>
                    </a>
                  </div>
                </dt>
                <dd v-for="(item, index) in hotMusicList" :key="index">
                  <span class="red">{{ index + 1 }}</span>
                  <a href="#">{{ item.name }}</a>
                  <div class="overflow">
                    <a href="#" class="a1"></a>
                    <a href="#" class="a2"></a>
                    <a href="#" class="a3"></a>
                  </div>
                </dd>
                <dd>
                  <span class="qb"
                    ><a href="#" @click="$router.push('/topList?id=19723756')"
                      >查看全部></a
                    ></span
                  >
                </dd>
              </dl>
              <!-- 中 -->
              <dl class="clearfix">
                <dt class="clearfix">
                  <a href="#">
                    <img src="@/assets/picture/b32.jpg" />
                  </a>
                  <!-- 右 -->
                  <div class="bd-dt-right clearfix">
                    <a href="#">
                      <p>新歌榜</p>
                    </a>
                    <a href="#">
                      <div class="bd-dt-right-action"></div>
                    </a>
                    <a href="#">
                      <div class="bd-dt-right-wj"></div>
                    </a>
                  </div>
                </dt>
                <dd v-for="(item, index) in newMusicList" :key="index">
                  <span class="red">{{ index + 1 }}</span>
                  <a href="#">{{ item.name }}</a>
                  <div class="overflow">
                    <a href="#" class="a1"></a>
                    <a href="#" class="a2"></a>
                    <a href="#" class="a3"></a>
                  </div>
                </dd>
                <dd>
                  <span class="qb"
                    ><a href="#" @click="$router.push('/topList?id=3779629')"
                      >查看全部></a
                    ></span
                  >
                </dd>
              </dl>
              <!-- 右 -->
              <dl class="clearfix">
                <dt class="clearfix">
                  <a href="#">
                    <img src="@/assets/picture/b33.jpg" />
                  </a>
                  <!-- 右 -->
                  <div class="bd-dt-right clearfix">
                    <a href="#">
                      <p>原创榜</p>
                    </a>
                    <a href="#">
                      <div class="bd-dt-right-action"></div>
                    </a>
                    <a href="#">
                      <div class="bd-dt-right-wj"></div>
                    </a>
                  </div>
                </dt>
                <dd v-for="(item, index) in originalMusicList" :key="index">
                  <span class="red">{{ index + 1 }}</span>
                  <a href="#">{{ item.name }}</a>
                  <div class="overflow">
                    <a href="#" class="a1"></a>
                    <a href="#" class="a2"></a>
                    <a href="#" class="a3"></a>
                  </div>
                </dd>
                <dd>
                  <span class="qb"
                    ><a href="#" @click="$router.push('/topList?id=2884035')"
                      >查看全部></a
                    ></span
                  >
                </dd>
              </dl>
            </div>
          </div>
        </div>

        <!-- 右边 -->
        <div class="hot-right">
          <!-- 上 -->
          <a href="#">
            <div class="hot-right-top">
              <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
              <div>用户登录</div>
            </div>
          </a>

          <!-- 入驻歌手 -->
          <div class="singer">
            <div class="singer-box">
              <a @click="$router.push('/singer')">查看全部></a>
              <h3>入驻歌手</h3>
            </div>
          </div>

          <ul class="album clearfix">
            <li
              class="clearfix"
              v-for="(item, index) in singerArr"
              :key="index"
            >
              <img :src="item.url" alt="" />
              <span>
                <a href="#">
                  <h3>{{ item.name }}</h3>
                </a>
                <a href="#">
                  <p>{{ item.info }}</p>
                </a>
              </span>
            </li>
            <a class="finally">申请成为网易音乐人</a>
          </ul>

          <!-- 热门主播 -->
          <div class="singer">
            <div class="singer-box">
              <h3>热门主播</h3>
            </div>
          </div>

          <!-- 主播 -->
          <div class="anchor">
            <ul>
              <li v-for="item,index in anchorArr" :key="index">
                <img :src="item.url" alt="" />
                <span class="clearfix">
                  <a href="#">{{item.name}}</a>
                  <div class="v"></div>
                  <p>{{item.score}}</p>
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  lunboApi,
  HotApi,
  newMusicApi,
  reqArtistsApi,
  GeiListApi,
  reqDjTopListApi,
} from "@/request/api";
export default {
  data() {
    return {
      bannerImgarr: [],
      bgimg: "../assets/image/download.png",
      // 轮播背景图片
      bannerbgImg: "",
      // 显示的图片
      bannershow: 0,
      timer: null,
      // 轮播下圆点
      slideshowli: [],
      // 轮播下圆点红的
      libgc: 0,
      // 热门
      HotValarr: [],
      // 新品
      newMusic: [],
      //飙升榜单
      hotMusicList: [],
      // 新歌表单
      newMusicList: [],
      // 原创
      originalMusicList: [],
      // 歌手
      singerArr: [],
      // 主播
      anchorArr:[]
    };
  },
  methods: {
    // 切换轮播图
    changebanner(num) {
      clearInterval(this.timer);
      if (num === -1) {
        if (this.bannershow == 0) {
          this.bannershow = this.bannerImgarr.length;
          this.libgc = this.bannerImgarr.length;
        }
        this.bannershow--;
        this.libgc--;
        this.bannerbgImg = this.bannerImgarr[this.bannershow].imageUrl;
      } else {
        if (this.bannershow == this.bannerImgarr.length - 1) {
          this.bannershow = -1;
          this.libgc = -1;
        }
        this.bannershow++;
        this.libgc++;
        this.bannerbgImg = this.bannerImgarr[this.bannershow].imageUrl;
      }
      this.bannerlun();
    },
    // 定时切换轮播图
    bannerlun() {
      this.timer = setInterval(() => {
        this.bannershow++;
        this.libgc++;

        if (this.bannershow > this.bannerImgarr.length - 1) {
          this.bannershow = 0;
          this.libgc = 0;
        }
        this.bannerbgImg = this.bannerImgarr[this.bannershow].imageUrl;
      }, 3000);
    },
    // 下原点切换
    switchBanner(index) {
      clearInterval(this.timer);
      this.bannershow = index;
      this.libgc = index;
      this.bannerbgImg = this.bannerImgarr[index].imageUrl;
      this.bannerlun();
    },
  },
  created() {
    // 轮播
    lunboApi().then((res) => {
      this.bannerImgarr = res.data.banners;
      this.bannerbgImg = this.bannerImgarr[this.bannershow].imageUrl;
      this.slideshowli.length = this.bannerImgarr.length;
      this.bannerlun();
    });
    // 热门
    HotApi({ limit: 8 }).then((res) => {
      this.HotValarr = res.data.result;
    });
    // 新品
    newMusicApi().then((res) => {
      let arr = res.data.albums;
      for (let index = 0; index < 5; index++) {
        this.newMusic[index] = arr[index];
      }
    });
    // 飙升
    GeiListApi(19723756).then((res) => {
      let arr = res.data.songs;
      for (let index = 0; index < 10; index++) {
        this.hotMusicList[index] = arr[index];
      }
    });
    // 新品
    GeiListApi(3779629).then((res) => {
      let arr = res.data.songs;
      for (let index = 0; index < 10; index++) {
        this.newMusicList[index] = arr[index];
      }
    });
    // 原创
    GeiListApi(2884035).then((res) => {
      let arr = res.data.songs;
      for (let index = 0; index < 10; index++) {
        this.originalMusicList[index] = arr[index];
      }
    });
    // 歌手
    reqArtistsApi(5,0).then((res) => {
      let arr = res.data.artists;
      arr.forEach((item) => {
        let x = {};
        x.name = item.name;
        if (item.alias == "") x.info = x.name;
        else x.info = item.alias[0];
        x.url = item.img1v1Url;
        x.id = item.id;
        this.singerArr.push(x);
      });
    });
    // 主播
    reqDjTopListApi(5).then((res) => {
      let arr = res.data.data.list;
      arr.forEach((item) => {
        let x = {};
        x.id = item.id;
        x.name = item.nickName;
        x.score = parseInt(item.score / 10000) + "万";
        x.url = item.avatarUrl;
        this.anchorArr.push(x);
      });
    });
  },
};
</script>
 
<style lang = "less" scoped>
/* 第三排 轮播图 */

.slideshow {
  width: 100%;
  height: 284px;
  border-bottom: 1px solid #ada4a5;
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--myImgPath);
    background-size: cover;
    filter: blur(50px);
    transform: scale(3);
  }
}

.bj-left-img {
  display: none;
}

.slideshow .bj-left {
  float: left;
  height: 284px;
}

.slideshow .bj-left img {
  float: left;
  width: 730px;
  height: 284px;
}

.slideshow .bj-right {
  float: right;
  width: 250px;
  height: 284px;
  background-image: url(../assets/image/download.png);
}

.slideshow .newcontainer {
  height: 284px;
}

/* 精灵图 */
/* 左 */
.slideshow .jl-left {
  position: absolute;
  top: 106px;
  left: -64px;
  background-image: url(../assets/image/banner.png);
  width: 37px;
  height: 63px;
  background-position: 0 -359px;
}

.slideshow .jl-left:hover {
  background-image: url(../assets/image/banner.png);
  background-position: 0 -430px;
}

.slideshow .jl-left:hover .slideshow {
  background-image: url(../assets/image/109951164532691333.jpg);
  z-index: 666;
}

/* 右 */
.slideshow .jl-right {
  position: absolute;
  top: 106px;
  left: 1000px;
  background-image: url(../assets/image/banner.png);
  width: 37px;
  height: 63px;
  background-position: 0 -507px;
}

.slideshow .jl-right:hover {
  background-image: url(../assets/image/banner.png);
  background-position: 0 -578px;
}

/* 下 */
.slideshow-sli {
  position: absolute;
  top: 258px;
  left: 0;
  height: 20px;
  width: 730px;
  text-align: center;
}

.slideshow-sli ul {
  display: inline-block;
}

.slideshow-sli ul li {
  display: inline-block;
}

.slideshow-sli ul li a {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../assets/image/banner.png);
  background-position: 0 -349px;
}

.slideshow-sli ul li a:hover {
  background-image: url(../assets/image/banner.png);
  background-position: -17px -349px;
}

.slideshow-sli ul li .active {
  background-image: url(../assets/image/banner.png);
  background-position: -17px -349px;
}

.slideshow .bj-right p {
  color: #8d8d8d;
  text-align: center;
  margin-top: 10px;
}

.bj-right-button {
  display: inline-block;
  margin-top: 184px;
  margin-left: 20px;
  width: 214px;
  height: 54px;
  background-image: url(../assets/image/download.png);
  background-position: -19px -186px;
}

.bj-right-button:hover {
  background-position: 0 -290px;
}

/* 第四排 热门推荐 */
.hot {
  width: 100%;
  height: 1434px;
  background-color: #f5f5f5;
}

.hot .newcontainer {
  height: 1434px;
}

/* 左边,上部导航 */
.hot-left {
  float: left;
  border-left: 1px solid #dddddd;
  width: 729px;
  height: 1434px;
  background-color: #ffffff;
}

.hot-left-top-nav {
  width: 690px;
  background-color: violet;
}

.hot-left-top p,
.hot-left-top a {
  float: left;
}

.hot-left-top {
  width: 690px;
  height: 36px;
  line-height: 36px;
  padding-top: 17px;
  margin-left: 20px;
  border-bottom: 2px solid #c10d0c;
  margin-bottom: 20px;
}

.hot-left-top p {
  font-size: 20px;
  margin: 0 10px 0 10px;
}

.hot-left-top li {
  float: left;
  color: #d2d2d2;
}

.hot-left-top a {
  margin: 0 12px;
  color: #6f6f6f;
}

.yuan {
  float: left;
  width: 16px;
  height: 14px;
  margin-top: 12px;
  margin-left: 10px;
  background-image: url(../assets/image/index.png);
  background-position: -234px -164px;
}

/* top-右 */
.hot-left-top .jt {
  float: right;
  width: 12px;
  height: 12px;
  background-image: url(../assets/image/index.png);
  background-position: 0 -240px;
  margin-right: 12px;
  margin-left: 0;
  margin-top: calc((36px - 12px) / 2);
}

.hot-left-top h3 {
  color: #767676;
  float: right;
  margin-right: 6px;
  font-weight: 400;
}

.hot-left-top h3 a {
  margin-left: 0;
  margin-right: 0;
}

.hot-left-top a:hover {
  text-decoration: underline;
}

/* 热门 视频 */
.hot-left-video {
  position: relative;
  width: 690px;
  height: 484px;
}

.hot-left-video div {
  position: relative;
  float: left;
  width: 140px;
  height: 210px;
  margin-left: 32px;
  margin-bottom: 22px;
  img {
    width: 140px;
    height: 140px;
  }
}

.hot-left-video div a {
  display: inline-block;
  font-size: 13px;
  color: #000000;
}

.hot-left-video div a:hover {
  text-decoration: underline;
}

.program {
  display: inline-block;
  width: 35px;
  height: 15px;
  margin-right: 5px;
  margin-top: 2px;
  background-image: url(../assets/image/icon.png);
  background-position: -31px -658px;
}

/* 精灵图         以下 */
/* 皇冠 */
.huangg {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-image: url(../assets/image/icon2.png);
  background-position: -135px -220px;
}

/* 图上背景 */
.img-back-g {
  position: absolute;
  width: 140px;
  height: 140px;
  top: 0;
  left: 0;
  background-image: url(../assets/image/coverall.png);
  background-position: 0 0;
}

/* 图下 */
.img-bottom {
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 100%;
  height: 27px;
  background-image: url(../assets/image/coverall.png);
  background-position: 0 -537px;
}

.bfl {
  float: left;
  width: 14px;
  height: 11px;
  background-image: url(../assets/image/iconall.png);
  background-position: 0 -24px;
  margin: 9px 5px 9px 10px;
}

.img-bottom b {
  float: left;
  margin-top: 7px;
  font-size: 12px;
  color: #cccccc;
  font-weight: 400;
}

.img-bottom .bof {
  position: absolute;
  right: 10px;
  bottom: 5px;
  width: 16px;
  height: 17px;
  background-image: url(../assets/image/iconall.png);
  background-position: 0 0;
}

.img-bottom .bof:hover {
  background-image: url(../assets/image/iconall.png);
  background-position: 0 -60px;
}

/* 新品上架 */
.xp {
  width: 690px;
}

.xp p {
  float: left;
  font-size: 20px;
  margin: 0 10px 0 10px;
}

.xp {
  width: 690px;
  height: 36px;
  line-height: 36px;
  padding-top: 17px;
  margin-left: 20px;
  border-bottom: 2px solid #c10d0c;
  margin-bottom: 20px;
}

.yuan {
  float: left;
  width: 16px;
  height: 14px;
  margin-top: 12px;
  margin-left: 10px;
  background-image: url(../assets/image/index.png);
  background-position: -234px -164px;
}

/* top-右 */
.xp .jt {
  float: right;
  width: 12px;
  height: 12px;
  background-image: url(../assets/image/index.png);
  background-position: 0 -240px;
  margin-right: 12px;
  margin-left: 0;
  margin-top: calc((36px - 12px) / 2);
}

.xp h3 {
  color: #767676;
  float: right;
  margin-right: 6px;
  font-weight: 400;
}

.hot-left-top h3 a {
  margin-left: 0;
  margin-right: 0;
}

.hot-left-top a:hover {
  text-decoration: underline;
}

/* 新碟上架 */
.hot .hot-left .plate {
  width: 690px;
  height: 186px;
  background-color: #f5f5f5;
  border: 1px solid #d3d3d3;
  margin: 0;
  margin-left: 20px;
  margin-bottom: 30px;
}

.plate ul {
  width: 644px;
  height: 175px;
  margin-left: 16px;
}

.plate ul li {
  position: relative;
  float: left;
  width: 116px;
  height: 174px;
  margin-left: 12px;
}

.plate-img-box {
  height: 100px;
  width: 116px;
}

.plate-img-box img {
  float: left;
  height: 100px;
  width: 100px;
  box-shadow: 0 4px 1spx rgba(0, 0, 0, 0.1);
}

.plate-img-box {
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 28px;
  margin-left: 12px;
  background-image: url(../assets/image/coverall.png);
  background-position: 0 -570px;
}

.img-back-z {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  background-image: url(../assets/image/coverall.png);
  background-position: 0 -570px;
}

.action {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 104px;
  left: 88px;
  background-image: url(../assets/image/iconall.png);
  background-position: -80px 0px;
  display: none;
}

.plate li:hover .action {
  display: block;
}

.plate-img-box a :hover {
  text-decoration: underline;
}

.plate-img-box-a1 {
  text-align: left;
  display: inline-block;
  width: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #000000;
}

.plate-img-box-a2 {
  text-align: left;
  display: inline-block;
  color: #666666;
}

/* 榜单 */
.List {
  width: 690px;
}

.List p {
  float: left;
  font-size: 20px;
  margin: 0 10px 0 10px;
}

.List {
  width: 690px;
  height: 36px;
  line-height: 36px;
  padding-top: 17px;
  margin-left: 20px;
  border-bottom: 2px solid #c10d0c;
  margin-bottom: 20px;
}

.yuan {
  float: left;
  width: 16px;
  height: 14px;
  margin-top: 12px;
  margin-left: 10px;
  background-image: url(../assets/image/index.png);
  background-position: -234px -164px;
}

/* top-右 */
.List .jt {
  float: right;
  width: 12px;
  height: 12px;
  background-image: url(../assets/image/index.png);
  background-position: 0 -240px;
  margin-right: 12px;
  margin-left: 0;
  margin-top: calc((36px - 12px) / 2);
}

.List h3 {
  color: #767676;
  float: right;
  margin-right: 6px;
  font-weight: 400;
}

.List h3 a {
  margin-left: 0;
  margin-right: 0;
}

.List a:hover {
  text-decoration: underline;
}

/* 榜单榜 */
.bd {
  width: 684px;
  height: 469px;
  margin-left: 21px;
  border: 1px solid #d7d7d7;
}

.bd dl {
  float: left;
  width: 227px;
  height: 468px;
  border-right: 1px solid #c8c8c8;
}

.bd dt {
  background-color: #f4f4f4;
  width: 227px;
  height: 118px;
}

.bd dt img {
  float: left;
  margin-left: 18px;
  margin-top: 20px;
  margin-right: 10px;
  width: 80px;
  height: 80px;
}

.bd dd {
  position: relative;
  height: 32px;
  width: 100%;
  line-height: 32px;
}

.bd dd:nth-child(2n-1) {
  background-color: #f4f4f4;
}

.bd dd:nth-child(2n) {
  background-color: #e8e8e8;
}

.bd-dt-right {
  float: right;
  width: 118px;
  height: 60px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
}

.bd-dt-right p:hover {
  text-decoration: underline;
}

.bd-dt-right-action {
  float: left;
  width: 22px;
  height: 22px;
  margin-top: 10px;
  background-image: url(../assets/image/index.png);
  background-position: -267px -205px;
}

.bd-dt-right-action:hover {
  background-image: url(../assets/image/index.png);
  background-position: -267px -235px;
}

.bd-dt-right-wj {
  float: left;
  width: 22px;
  height: 22px;
  margin-top: 10px;
  margin-left: 10px;
  background-image: url(../assets/image/index.png);
  background-position: -300px -205px;
}

.bd-dt-right-wj:hover {
  background-image: url(../assets/image/index.png);
  background-position: -300px -235px;
}

.bd dd span {
  float: left;
  margin: 0 12px 0 28px;
  font-size: 12px;
  color: #666666;
}

dl dd .red {
  color: #c93c3b;
}

.bd dd a {
  float: left;
}

/* .bd dd:hover{
    text-decoration: underline;
    width: 81px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
} */

.bd dd .qb {
  float: right;
  font-size: 12px;
  margin-left: 30px;
  color: #0a0a0a;
}

.bd dd .overflow {
  float: right;
  width: 82px;
  margin-top: 7px;
  display: none;
}

.bd dd:hover .overflow {
  display: block;
}

.bd dd .a1 {
  float: left;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  background-image: url(../assets/image/index.png);
  background-position: -267px -288px;
}

.bd dd .a2 {
  float: left;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  margin-top: 2px;
  background-image: url(../assets/image/icon.png);
  background-position: -22px -700px;
}

.bd dd .a3 {
  float: left;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  background-image: url(../assets/image/index.png);
  background-position: -297px -288px;
}

/* hot-右边 */
.hot-right {
  float: left;
  width: 248px;
  height: 1434px;
  background-color: #ffffff;
  border-left: 1px solid #e2e2e2;
  border-right: 1px solid #e2e2e2;
}

.hot-right-top {
  width: 246px;
  height: 122px;
  background-color: #e8e8e8;
  border: 1px solid #ffffff;
}

.hot-right-top p {
  width: 205px;
  line-height: 22px;
  margin: 0 auto;
  padding: 16px 0;
  color: #757575;
}

.hot-right-top div {
  width: 100px;
  height: 31px;
  background-color: salmon;
  margin: auto;
  background-image: url(../assets/image/index.png);
  background-position: 0 -195px;
  font-size: 13px;
  color: #ffffff;
  line-height: 31px;
  text-align: center;
}

.hot-right-top div:hover {
  background-image: url(../assets/image/index.png);
  background-position: -110px -195px;
}

/* 入驻歌手 */
.singer {
  width: 100%;
  height: 60px;
  border-top: 1px solid #b1b1b1;
}

.singer-box {
  width: 210px;
  height: 20px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 12px;
  line-height: 8px;
}

.singer-box a {
  float: right;
  color: #666666;
}

.singer-box a:hover {
  text-decoration: underline;
}

.singer-box h3 {
  float: left;
  font-weight: 800;
  color: #333333;
}

/* ul专辑 */
.album {
  width: 210px;
  height: 426px;
  margin: 0 auto;
  text-align: left;
}

.album ul {
  display: block;
}

.album li {
  width: 210px;
  height: 60px;
  margin-bottom: 14px;
}

.album li img {
  float: left;
  width: 58px;
  height: 58px;
}

.album li span {
  float: right;
  width: 132px;
  height: 58px;
  border: 1px solid #e9e9e9;
  border-left: 0;
  padding-left: 19px;
  background-color: #fafafa;
}

.album li span:hover {
  background-color: #f4f4f4;
}

.album li span h3 {
  color: #333333;
  font-weight: 900;
  margin-top: 6px;
}

.album li span p {
  margin-top: 16px;
  color: #666666;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.album li div {
  height: 26px;
  width: 208px;
  margin: 0 auto;
}

.finally {
  display: inline-block;
  width: 208px;
  height: 26px;
  margin: 0 auto;
  background-color: #f8f8f8;
  border: 1px solid #c4c4c4;
  border-radius: 6px;
  line-height: 26px;
  text-align: center;
  font-weight: 700;
  text-shadow: 0 1px 1px #e2e2e2;
}

.finally:hover {
  background-color: #fefefe;
}

/* 主播 */
.anchor {
  text-align: left;
  height: 250px;
  width: 250px;
}

.anchor ul {
  width: 208px;
  height: 250px;
  margin: 0 auto;
}

.anchor ul li {
  height: 40px;
  width: 100%;
  margin-bottom: 10px;
}

.anchor ul li img {
  width: 40px;
  height: 40px ;
  float: left;
}

.anchor ul li span {
  float: left;
  width: 160px;
  margin-left: 8px;
}

.anchor ul li span a {
  float: left;
  margin-top: 4px;
  color: #121212;
}

.anchor ul li span div {
  float: left;
  width: 11px;
  height: 13px;
  margin-left: 2px;
  background-image: url(../assets/image/icon.png);
  background-position: 0 1px;
  vertical-align: bottom;
}

.anchor ul li span a:hover {
  text-decoration: underline;
}

.anchor ul li span p {
  width: 80%;
  color: #767676;
  margin-top: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fh-top {
  position: fixed;
  right: 180px;
  bottom: 130px;
  width: 49px;
  height: 44px;
  background-image: url(../assets/image/sprite.png);
  background-position: -265px -47px;
}

.fh-top:hover {
  background-image: url(../assets/image/sprite.png);
  background-position: -325px -47px;
}
</style>